<template>
    <div class="ScreenViewManageTree" v-if="treeData.length>0">
        <div v-for="(item,index) in treeData" :key="index" class="ScreenViewManageTree-center">
            <a-collapse default-active-key="1" :bordered="false">
                <template #expandIcon="props">
                    <caret-right-outlined :rotate="props.isActive ? 90 : 0"/>
                </template>
                <div class="props-caret-more">
                    <div @mouseenter="mouseenter($event)" class="props-caret-more-icon">
                        <rx-icon-show icon="icon-lineVue3_more-vertical"></rx-icon-show>
                    </div>
                    <div :class="[position=='top'?'props-caret-more-button':'props-caret-more-button-1']">
                        <div class="props-caret-more-list" @click.stop="onEdit(item)">
                            <rx-icon-show icon="icon-lineedit"></rx-icon-show>
                            {{ $ti18('rxList.editBtn', '编辑') }}
                        </div>
                        <div class="props-caret-more-list" @click.stop="onAddSibling(item)">
                            <rx-icon-show icon="icon-linetongji"></rx-icon-show>
                            {{ i18n('list.addSibling', '添加同级') }}
                        </div>
                        <div class="props-caret-more-list" @click.stop="onAddChild(item)">
                            <rx-icon-show icon="icon-lineziji"></rx-icon-show>
                            {{ i18n('list.addChild', '添加子级') }}
                        </div>
                        <div class="props-caret-more-list" @click="inputFileClick(item)">
                            <rx-icon-show icon="icon-linea-Importdata"></rx-icon-show>
                            {{ $ti18('rxList.importBtn', '导入') }}
                        </div>
                        <div class="props-caret-more-list" @click.stop="onDel(item)">
                            <rx-icon-show icon="icon-lineVue3_delete"></rx-icon-show>
                            {{ $ti18('rxList.delBtn', '删除') }}
                        </div>
                    </div>
                </div>
                <a-collapse-panel key="1" :header="item.name">
                    <div class="instrument-list" :class="[selectView.alias ==item.alias?'instrument-list-hover':'']"
                         @click="screenTree(item)" v-for="(item,index1) in item.list" :key="index1">
                        <rx-icon-show icon="icon-colords-tubiao"></rx-icon-show>
                        <div class="instrument-list-name">{{ $i18(item.name) }}</div>
                        <div class="more-list" @mouseenter="mouseenter($event)">
                            <rx-icon-show icon="icon-lineVue3_more-vertical"></rx-icon-show>
                            <div :class="[position=='top'?'props-caret-more-button':'props-caret-more-button-3']">
                                <div @click.stop="design(item.id)" class="props-caret-more-list">
                                    <rx-icon-show icon="icon-lineedit"></rx-icon-show>
                                    {{ $ti18('rxList.editBtn', '编辑') }}
                                </div>
                                <div @click.stop="exportScreen(item.pkId)" class="props-caret-more-list">
                                    <rx-icon-show icon="icon-linea-exportdata"></rx-icon-show>
                                    {{ i18n('list.exportBtn', '导出') }}
                                </div>
                                <div @click.stop="delById(item.id)" class="props-caret-more-list">
                                    <rx-icon-show icon="icon-lineVue3_delete"></rx-icon-show>
                                    {{ $ti18('rxList.delBtn', '删除') }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div v-if="item.children && item.children.length>0" style="margin-left: 15px">
                        <ScreenViewManageTree @initTree="initTree" @screenTree="screenTree" @design="design"
                                              @delById="delById" :parenData="parenData"
                                              :selectView="selectView"
                                              :treeData="item.children" :count='count+1'></ScreenViewManageTree>
                    </div>
                </a-collapse-panel>
            </a-collapse>
        </div>
        <input @change="importScreen" ref="inputFile" style="display: none;" type="file"/>
    </div>
</template>

<script>
import {Util} from "@lowcode/jpaas-base-lib";
import SysTreeEdit from "@/views/modules/screen/core/sys-tree-edit.vue";
import ScreenViewManageApi from "@/api/screen/core/screen-view-manage";

export default {
    name: "ScreenViewManageTree",
    props: {
        count: {
            default: 0
        },
        treeData: {
            type: Array,
            default: () => [],
        },
        selectView: {},
        parenData: {
            type: Array,
            default: () => [],
        },
    },
    data() {
        return {
            curRow: {},
            selCatKey: '',
            position: 'top',
        }
    },
    mounted() {
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "SysTree", key);
        },
        initTree() {
            this.$emit('initTree')
        },
        screenTree(obj) {
            this.$emit('screenTree', obj)
        },
        //添加子级
        onAddChild(record) {
            this.selCatKey = record.catKey
            let rs = Object.assign({parentName: record.name, parentId: record.treeId, catKey: record.catKey});
            let title = this.i18n('list.addChild', '添加子级');
            this.curRow = record;
            this.modtclick(rs, title, "addchild")
        },
        //添加同级
        onAddSibling(record) {
            this.selCatKey = record.catKey
            let title = this.i18n('list.addSibling', '添加同级');
            this.curRow = record;
            if (record.parentId && record.parentId != '0') {
                //取得上级的数据
                ScreenViewManageApi.treeGet(record.parentId).then(response => {
                    let data = response.data;
                    let rs = Object.assign({parentName: data.name, parentId: data.treeId, catKey: record.catKey});
                    this.modtclick(rs, title, "addSibling")
                });
            } else {
                let catKey = record.catKey;
                if (!catKey) {
                    catKey = this.selCatKey;
                }
                let rs = Object.assign({parentName: '', parentId: '0', catKey: catKey});
                this.modtclick(rs, title, "addSibling")
            }
        },
        modtclick(data, title) {
            if (!this.selCatKey || this.selCatKey == '') {
                this.$message.warning(this.i18n('msa.selKeyTips', '请选择分类key'));
                return;
            }
            let conf = {
                curVm: this,
                data: {data: data},
                widthHeight: ['800px', '450px'],
                component: SysTreeEdit,
                title: title,
                zIndex:999,
            };
            //编辑
            if (data.treeId) {
                conf.data.pkId = data.treeId;
            }
            let self_ = this;
            Util.open(conf, function (action) {
                if (action != "ok") {
                    return;
                }
                self_.initTree()
            });
        },
        //编辑
        onEdit(record) {
            this.selCatKey = record.catKey;
            let title = this.$ti18('rxList.editBtn', '编辑');
            this.curRow = record;
            this.modtclick(record, title, "edit")
        },
        //删除
        onDel(record) {
            let self_ = this
            this.$confirm({
                title: this.$ti18('rxMsa.actionTips', '操作提示'),
                content: this.$ti18('rxMsa.delInfo', '您确定...'),
                okText: this.$ti18('rxForm.ackBtn', '确认'),
                cancelText: this.$ti18('rxForm.cancelBtn', '取消'),
                onOk() {
                    ScreenViewManageApi.delByTreeId({treeId: record.treeId}).then(res => {
                        if (res.success && res.code == 200) {
                            self_.initTree();
                        }
                    })
                },
                onCancel() {
                }
            })
        },
        //添加树
        onAddTree() {
            let title = this.i18n('list.newTitle', '新建分类')
            this.selCatKey = 'SCREEN'
            this.modtclick({catKey: this.selCatKey, parentName: '', parentId: '0'}, title, "add")
        },
        inputFileClick(item) {
            this.selectTreeId = item.treeId;
            this.$refs.inputFile.click()
        },
        //导入
        importScreen() {
            let self_ = this;
            let files = this.$refs.inputFile;
            let imputFiles = files.files[0];
            if (imputFiles) {
                const formData = new FormData();
                formData.append('zipFile', imputFiles);
                ScreenViewManageApi.importScreen(formData, this.selectTreeId).then(res => {
                    if (res && res.success) {
                        self_.$emit('allInit')
                    }
                    //清空文件，反正第二次选择不触发change
                    self_.$refs.inputFile.value = "";
                }).finally(() => {
                    //清空文件，反正第二次选择不触发change
                    self_.$refs.inputFile.value = "";
                });
            }
        },
        mouseenter(e) {
            let top = e.currentTarget.getBoundingClientRect().top;
            let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
            if (top < h - 250) {
                this.position = 'top'
            } else {
                this.position = 'bottom'
            }
        },
        //列表按钮操作
        design(id) {
            this.$emit('design', id)
        },
        //导出
        exportScreen(pkId) {
            ScreenViewManageApi.exportScreenByIds([pkId]);
        },
        //删除
        delById(id) {
            this.$emit('delById', id)
        }
    }
}
</script>

<style lang="less">
.more-list {
    display: none;
    height: 22px;
    line-height: 22px;
    width: 22px;
    text-align: center;
    position: relative;
    cursor: pointer;
    font-size: 14px;

    i {
        font-size: 15px !important;
        margin-left: 5px;
    }
}

.more-list:hover {
    background-color: #dadce2;
    color: #555555 !important;
    border-radius: 3px;
}

.more-list:hover .props-caret-more-button, .more-list:hover .props-caret-more-button-3 {
    display: block;
}

.props-caret-more-button-3 {
    display: none;
    position: absolute;
    top: -110px;
    right: 0px;
    min-width: 120px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
    border-radius: 5px;
    background-color: #fff;
    padding: 4px 0;
    z-index: 999999999;
    font-size: 14px;
    text-align: center;
    font-weight: normal;
}

.ScreenViewManageTree {
    .ant-collapse-content {
        overflow: initial;
    }
}

.props-caret-more-list {
    line-height: 35px;
    height: 35px;
    text-align: left;
    padding: 0px 10px;
    overflow: hidden;
    white-space: inherit;
    text-overflow: ellipsis;
}

.props-caret-more-list i {
    margin-right: 5px;
}

.props-caret-more-list:hover {
    color: #0daaf6;
    cursor: pointer;
}

.props-caret-more:hover .props-caret-more-button, .props-caret-more:hover .props-caret-more-button-1 {
    display: block;
}

.props-caret-more-button {
    display: none;
    position: absolute;
    top: 20px;
    right: 0px;
    min-width: 120px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
    border-radius: 5px;
    background-color: #fff;
    padding: 4px 0;
    z-index: 999999999;
    font-size: 14px;
    text-align: center;
    font-weight: normal;
}

.props-caret-more-button:before {
    content: "";
    position: absolute;
    top: -1px;
    right: 10px;
    display: block;
    width: 8px;
    height: 8px;
    background: transparent;
    border-style: solid;
    border-width: 4px;
    border-color: #fff #fff transparent transparent;
    -webkit-box-shadow: 3px 3px 7px rgba(0, 0, 0, .07);
    box-shadow: 3px 3px 7px rgba(0, 0, 0, .07);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.props-caret-more-button-1 {
    display: none;
    position: absolute;
    top: -182px;
    right: 0px;
    min-width: 120px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
    border-radius: 5px;
    background-color: #fff;
    padding: 4px 0;
    z-index: 999999999;
    font-size: 14px;
    text-align: center;
    font-weight: normal;
}

.ScreenViewManageTree-center {
    position: relative;
}

.ScreenViewManageTree-center > .ant-collapse:hover > .props-caret-more {
    display: block;
}

.props-caret-more {
    display: none;
    font-weight: bold;
    font-size: 15px;
    position: absolute;
    top: 5px;
    right: 10px;
    cursor: pointer;
    z-index: 1;
}

.props-caret-more-icon {
    width: 22px;;
    height: 22px;
    line-height: 22px;
    text-align: center;
}

.props-caret-more-icon:hover {
    background-color: #dadce2;
    border-radius: 2px;

}

.ScreenViewManageTree {
    .ant-collapse-header {
        padding: 5px 0px 5px 15px !important;
    }
}

.instrument-list {
    display: flex;
    height: 40px;
    align-items: center;
    line-height: 40px;
    padding: 0px 10px;
    cursor: pointer;
}

.instrument-list:hover {
    background-color: #eff5ff;
    color: #4285f4;
}

.instrument-list:hover .more-list {
    display: block;
}

.instrument-list-hover {
    background-color: #eff5ff;
    color: #4285f4;
}

.instrument-list i {
    font-size: 20px;
    margin-right: 5px;
}

.instrument-list-name {
    flex: 1;
    font-size: 14px;
    color: #666666;
    overflow: hidden;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>
